<template>
  <div id="app">
      <div class="box">
          <div ref="vantaRef" style="width: 100%; height: 100vh">
    <el-container>
      <el-main>
        <div style="float: right;margin-top: 0;">
          <el-button type="primary" @click="backToIndex">返回首页
            <i class="el-icon-arrow-right el-icon--right"></i>
          </el-button>
        </div>
        
        <div style="height: 450px;background-position: center;background-repeat: no-repeat;background-size: 100%">
          <el-card style="width: 500px;height: 450px;margin: 100px auto;background-color: rgba(255,255,255,0.85)">
            <h1 style="position: relative;left: 50px;top: 20px">欢迎登录</h1>
            <a style="float: right;
                    text-decoration: none;
                    color: #409EFF;
                    position: relative;
                    top: 10px;
                    margin-right: 30px" @click="toReg">
              没有账号？立即注册
            </a>
            <el-form :model="user" :rules="rules" ref="user" label-width="80px" style="width: 400px;margin: 50px auto">
              <el-form-item label="用户名" prop="username">
                <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" placeholder="请输入用密码" v-model="user.password"></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="code">
                <div style="height: 41.2px;">
                  <el-input placeholder="请输入验证码" v-model="user.code" style="width: 180px;position: relative; top: -15px"
                    @keyup.enter.native="login('user')"></el-input>
                  <el-image :src="url" style="cursor: pointer; position: relative; left: 6px"
                    @click="getUrl()"></el-image>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="login('user')" style="margin-left: 40px">登录</el-button>
                <el-button @click="resetForm('user')" style="margin-left: 30px">重置</el-button>
              </el-form-item>

              <el-form-item label="登录方式">
                <span>
                  <el-button icon="el-icon-eleme" @click="loginByEmail">邮箱登录</el-button>
                  <el-button icon="el-icon-mobile-phone" @click="loginByPhone"> 手机验证码登录</el-button>
                </span>
              </el-form-item>

            </el-form>
          </el-card>
        </div>

      </el-main>
      <!--底部开始-->
      <el-footer></el-footer>
      <!--底部结束-->
    </el-container>
          </div>
      </div>
  </div>
</template>

<script>
// import * as THREE from "three";
import GLOBE from "vanta/src/vanta.globe";
export default {
  data() {
    return {
      user: { username: '', password: '', code: '' },
      url: "",
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ],
      }
    }
  },
    mounted() {
        this.vantaEffect = GLOBE({
            el: this.$refs.vantaRef,
            THREE: THREE,
        });
        VANTA.GLOBE({
            el: this.$refs.vantaRef,
            /*以下为样式配置*/
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.0,
            minWidth: 200.0,
            scale: 1.0,
            scaleMobile: 1.0,
            color: 0xc5c5c5,
            size: 1.1,
            backgroundColor: 0x4300bb,
        });
    },
    beforeDestroy() {
        if (this.vantaEffect) {
            this.vantaEffect.destroy();
        }
    },
  methods: {

    loginByEmail() {
      window.location.href = "loginByEmail.html"
    },

    loginByPhone() {
      window.location.href = "loginByPhone.html"
    },

    login(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = '/user/loginByPassword';
          console.log('url = ' + url);
          this.axios.post(url, this.user).then((response) => {
            if (response.data.code === 1) {
              window.location.replace('/');
              localStorage.msg = response.data.msg;
              localStorage.user = JSON.stringify(response.data.data);
            }
            else {
              this.$message.error(response.data.msg);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },

    getUrl() {
      // {responseType:'blob'}
      let url = '/kaptcha';
      this.axios.get(url, { responseType: 'blob' }).then((response) => {
        console.log(response.data);
        this.url = window.URL.createObjectURL(response.data);
        console.log(this.url);
      })
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    toReg() {
      window.location.href = "regByPhone.html"
    },
    backToIndex() {
      window.location.href = "index.html"
    },
  },
  created: function () {
    this.getUrl();
  }
}
</script>

<style>
.bj {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  z-index: -10;
  zoom: 1;
  background-color: #fff;
  background-image: url('http://rww08uahf.hn-bkt.clouddn.com/%E7%99%BB%E5%BD%95%E8%83%8C%E6%99%AF.png');
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}
</style>
